<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() +
            "://"
            + request.getServerName() + ":"
            + request.getServerPort()
            + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

    <script type="text/javascript">


        var array=[];
        $(function (){
            pageList(1,4);

            $("#addBtn").click(function (){
                var $xz=$("input[name=xz]:checked");
                if($xz.length==0){
                    alert("请选择加入试卷的题目")
                }else {
                    for (var i = 0; i < $xz.length; i++) {
                        if(!array.includes($($xz[i]).val())){
                            array.push($($xz[i]).val())
                        }
                    }
                    for (var i = 0; i < $xz.length; i++) {
                        $($xz[i]).prop("checked",false);
                    }
                    $("#qx").prop("checked",false);
                    $("#count").html("已加入题目数:"+array.length)
                }
            })


            $("#qx").click(function (){
                $("input[name=xz]").prop("checked",this.checked);
            })

            $("#questionBody").on("click",$("input[name=xz]"),function (){
                $("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);
            })

            $("#searchBtn").click(function (){
                pageList(1,4);
            })


            $("#makeTestBtn").click(function (){
                if(array.length==0){
                    alert("请先选择题目加入试卷");
                }else{
                    pageList2(1,4)
                    $("#MakeTestModal").modal("show");
                }
            })

            $("#makeTest").click(function (){
                $(".time").datetimepicker({
                    minView: "month",
                    language:  'zh-CN',
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    todayBtn: true,
                    pickerPosition: "bottom-left"
                });
                $("#MakeTestModal").modal("hide");
                $("#examinationModal").modal("show");
            })


            $("#confirmMakeTest").click(function (){
                var eName=$("#exam_ename").val()
                var teacherId=$("#exam_teacher").val()
                var startTime=$("#exam_startTime").val()
                var endTime=$("#exam_endTime").val()
                var count=array.length
                var param = "eName="+eName+"&teacherId="+teacherId+"&startTime="+startTime+"&endTime="+endTime+"&count="+count+"&";
                for (var i = 0; i < array.length; i++) {
                    param += "qid=" + array[i];
                    //	如果不是最后一个元素，需要在后面追加一个&符
                    if (i < array.length - 1) {
                        param += "&";
                    }
                }
                $.ajax({
                    url:"workbench/teacher/makeTest/addExamination.do",
                    data:param,
                    dataType:"json",
                    type:"post",
                    success:function (data){
                        if(data.success){
                            alert(data.msg)
                            $("#examinationForm")[0].reset();
                            //    关闭模态窗口
                            $("#examinationModal").modal("hide");
                            $("#MakeTestModal").modal("hide");
                            window.location.href="toView/workbench/teacher/makeTest/makeTest";
                        }else {
                            alert(data.msg)
                        }
                    }
                })

            })


        })


        function pageList(pageNo, pageSize) {
            var head=$.trim($("#search_questionHead").val());
            var createTime=$.trim($("#search_createDate").val());

            $.ajax({
                url: "workbench/teacher/practice/pageList.do",
                data: {
                    "pageNo": pageNo,
                    "pageSize": pageSize,
                    "head":head ,
                    "createTime":createTime
                },
                dataType: "json",
                type: "get",
                success:function (data){
                    var html="";
                    $.each(data.dataList,function (i,n){
                        html+='  <tr class="active">',
                            html+='  <td><input name="xz" type="checkbox" value="'+n.qid+'"/></td>',
                            html += '<td>' + n.qid + '</td>';
                        html+='  <td><a style="text-decoration: none; cursor: pointer;" onclick="showContent(\''+n.qid+'\')">'+n.head+'</a></td>',
                            html+='  <td>'+n.teacherId+'</td>',
                            html+='  <td>'+n.createTime+'</td>',
                            html+='  </tr>'
                    })
                    $("#questionBody").html(html);
                    var totalPages=Math.ceil(data.total/pageSize);
                    $("#questionPage").bs_pagination({
                        currentPage: pageNo, // 页码
                        rowsPerPage: pageSize, // 每页显示的记录条数
                        maxRowsPerPage: 20, // 每页最多显示的记录条数
                        totalPages: totalPages, // 总页数
                        totalRows: data.total, // 总记录条数

                        visiblePageLinks: 5, // 显示几个卡片

                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        showRowsDefaultInfo: true,

                        /*该回调函数是在点击分页组件时候触发的*/
                        onChangePage : function(event, data){
                            pageList(data.currentPage , data.rowsPerPage);
                        }
                    });

                }
            })

            $("#qx").prop("checked",false);
        }

        function showContent(qid) {
            $.ajax({
                url:"workbench/teacher/practice/getQuestionById.do",
                data:{
                    "qid":qid
                },
                dataType:"json",
                type:"get",
                success:function (data){
                    //	处理题目
                    $("#check_questionId").val(data.dataList[0].qid);
                    $("#check_question_head").val(data.dataList[0].head);
                    $("#check_question_type").val(data.dataList[0].type);
                    $("#check_question_answerA").val(data.dataList[0].answerA);
                    $("#check_question_answerB").val(data.dataList[0].answerB);
                    $("#check_question_answerC").val(data.dataList[0].answerC);
                    $("#check_question_answerD").val(data.dataList[0].answerD);
                    $("#check_question_rightAnswer").val(data.dataList[0].right_answer);
                    $("#check_createDate").val(data.dataList[0].createTime);

                    //	所有的值都填写好之后，打开修改操作的模态窗口
                    $("#checkQuestionModal").modal("show");

                }
            })
        }

        function pageList2(pageNo, pageSize) {
            var param = "pageNo="+pageNo+"&pageSize="+pageSize+"&";
            for (var i = 0; i < array.length; i++) {
                param += "qid=" + array[i];
                //	如果不是最后一个元素，需要在后面追加一个&符
                if (i < array.length - 1) {
                    param += "&";
                }
            }
            $.ajax({
                url: "workbench/teacher/makeTest/pageList.do",
                data: param,
                dataType: "json",
                type: "get",
                success:function (data){
                    var html="";
                    $.each(data.dataList,function (i,n){
                        html+='  <tr class="active">',
                        html += '<td>' + n.qid + '</td>';
                        html+='  <td><a style="text-decoration: none; cursor: pointer;" onclick="showContent(\''+n.qid+'\')">'+n.head+'</a></td>',
                        html+='  <td>'+n.teacherId+'</td>',
                        html+='  <td>'+n.createTime+'</td>',
                        html+='<td><span class="glyphicon glyphicon-pencil"></span> <a style="text-decoration: none; cursor: pointer;" onclick="deleteOne(\''+n.qid+'\')">删除</a></td>',
                        html+='  </tr>'
                    })
                    $("#questionBody2").html(html);
                    var totalPages=Math.ceil(data.total/pageSize);
                    $("#questionPage2").bs_pagination({
                        currentPage: pageNo, // 页码
                        rowsPerPage: pageSize, // 每页显示的记录条数
                        maxRowsPerPage: 20, // 每页最多显示的记录条数
                        totalPages: totalPages, // 总页数
                        totalRows: data.total, // 总记录条数

                        visiblePageLinks: 5, // 显示几个卡片

                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        showRowsDefaultInfo: true,

                        /*该回调函数是在点击分页组件时候触发的*/
                        onChangePage : function(event, data){
                            pageList2(data.currentPage , data.rowsPerPage,array);
                        }
                    });

                }
            })

            $("#qx").prop("checked",false);
        }

        function deleteOne(qid) {
            if (confirm("您确定要删除所选择的题目嘛")) {
                var index = array.indexOf(qid)
                array.splice(index, 1)
                pageList2(1, 4)
                $("#count").html("已加入题目数:"+array.length)
            }
        }

    </script>
</head>
<body>

<!-- 生成试卷的模态窗口 -->
<div class="modal fade" id="examinationModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel4">生成试卷</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="examinationForm">
                    <div class="form-group">
                        <label for="exam_teacher" class="col-sm-2 control-label">创建者<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="exam_teacher" >
                                <option value="${user.teacherId}">${user.name}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exam_ename" class="col-sm-2 control-label">试卷名称<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="exam_ename">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="exam_startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="exam_startTime" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="exam_endTime" class="col-sm-2 control-label">截止日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="exam_endTime" readonly>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="confirmMakeTest" type="button" class="btn btn-primary">生成试卷</button>
            </div>
        </div>
    </div>
</div>

<!-- 组卷窗口 -->
<div class="modal fade" id="MakeTestModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;height: 1000px">
        <div class="modal-content" style="height: 70%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">组卷详情</h4>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="makeTest" type="button" class="btn btn-primary">组卷</button>
                </div>
            </div>
            <div class="modal-body">
                <div style="position: relative;top: 5px;">
                    <table class="table table-hover">
                        <thead>
                        <tr style="color: #B3B3B3;">
                            <td>题目编号</td>
                            <td>题目描述</td>
                            <td>创建者</td>
                            <td>创建日期</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody id="questionBody2">

                        </tbody>
                    </table>
                </div>
                <div style="height: 15px; position: relative;top: 15px;">
                    <div id="questionPage2"></div>
                </div>

            </div>

        </div>
    </div>
</div>


<!-- 查看详细信息模态窗口 -->
<div class="modal fade" id="checkQuestionModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel3">查看题目</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <input type="hidden" id="check_questionId">

                    <div class="form-group">
                        <label for="check_teacher" class="col-sm-2 control-label">创建者<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="check_teacher" >
                                <option value="${user.teacherId}">${user.name}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="check_question_head" class="col-sm-2 control-label">题目描述<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="check_question_head" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_question_type" class="col-sm-2 control-label">题目类型<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="check_question_type" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_question_answerA" class="col-sm-2 control-label">答案A</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="check_question_answerA" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_question_answerB" class="col-sm-2 control-label ">答案B</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="check_question_answerB" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="check_question_answerC" class="col-sm-2 control-label ">答案C</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="check_question_answerC" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_question_answerD" class="col-sm-2 control-label ">答案D</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="check_question_answerD" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_question_rightAnswer" class="col-sm-2 control-label ">正确答案</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="check_question_rightAnswer" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_createDate" class="col-sm-2 control-label">创建日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="check_createDate" readonly>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>



<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>题库列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">题目描述</div>
                        <input id="search_questionHead" class="form-control" type="text">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">创建日期</div>
                        <input class="form-control time" type="text" id="search_createDate" />
                    </div>
                </div>

                <button id="searchBtn" type="button" class="btn btn-default">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button id="addBtn" type="button" class="btn btn-primary" ><span class="glyphicon glyphicon-plus"></span> 加入试卷</button>
                <button id="makeTestBtn" type="button" class="btn btn-default" ><span class="glyphicon glyphicon-pencil"></span>组卷</button>
                <span id="count" style="color: red;position: relative;top: 10px;left: 10px">已加入题目数：0</span>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input id="qx" type="checkbox" /></td>
                    <td>题目编号</td>
                    <td>题目描述</td>
                    <td>创建者</td>
                    <td>创建日期</td>
                </tr>
                </thead>
                <tbody id="questionBody">

                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">

            <div id="questionPage"></div>

        </div>

    </div>

</div>
</body>
</html>